<template>
  <m-box title="设备管理" class="equipment-management">
    <dv-capsule-chart :config="config" />
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import { onMounted } from 'vue'

const config = ref({
  data: [
    { name: '总数', field: 'totalQty', value: 0 },
    { name: '运行数', field: 'runQty', value: 0 },
    { name: '非运行数', field: 'noRunQty', value: 0 }
  ],
  colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
  showValue: true
})

const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/geteQuipmentManageReport')
    config.value.data.forEach((r) => {
      r.value = res[r.field]
    })
    console.log(config.value)
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
</script>
<style lang="less" scoped>
.equipment-management {
  ::v-deep(.m-box__body) {
    overflow: auto;
    .dv-border-box-7 {
      .border-box-content {
        height: 100%;
        position: relative;
        .dv-capsule-chart {
          width: 96%;
          height: 180px;
          position: absolute;
          top: 60%;
          left: 48%;
          transform: translate(-50%, -50%);
          .label-column {
            > div {
              font-size: 18px;
              line-height: 30px;
            }
          }
          .capsule-container {
            .capsule-item {
              height: 24px;
              .capsule-item-column {
                height: 22px;
                .capsule-item-value {
                  padding-left: 5px;
                  font-size: 18px;
                }
              }
            }
            .unit-label {
              > div {
                font-size: 18px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
